<script setup lang='ts'>
import { ref } from 'vue';
import { login } from "../api/api";
import { RouterLink,useRouter } from "vue-router";
import { showNotify } from 'vant';
const router = useRouter()
const username = ref('');
const password = ref('');
//返回用户页面
const onClickLeft = () => router.push({name:'user'});
//登录操作
const onSubmit = async(values: {mail:string,password:string}) => {
    const res = await login({mail:values.mail,password:password.value})
    if(res.data.code !== '200') return showNotify({ message: res.data.msg });
    showNotify({ type: 'success',  message: res.data.msg });
    localStorage.setItem('token',res.data.data.token)
    localStorage.setItem('mail',res.data.data.id)
    onClickLeft()
};
</script>

<template>
    <van-nav-bar title="欢迎登录沙雕素材" left-text="返回" color="black" left-arrow @click-left="onClickLeft" />
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field v-model="username" name="mail" label="邮箱" placeholder="请填写邮箱"
                :rules="[{ required: true, message: '请填写邮箱' }]" />
            <van-field v-model="password" type="password" name="password" label="密码" placeholder="请填写密码"
                :rules="[{ required: true, message: '请填写密码' }]" />
            <div class="login">
                <!-- <RouterLink :to="{name:'upPassword'}">忘记密码</RouterLink> -->
                <RouterLink :to="{name:'register'}">注册账号</RouterLink>
            </div>
        </van-cell-group>

        <div style="margin: 16px;">
            <van-button block native-type="submit" type="primary">登录</van-button>
        </div>
    </van-form>
</template>

<style scoped>
.van-field {
    margin-top: 20px;
}
.login{
    display: flex;
    box-sizing: border-box;
    padding: 15px;
    font-size: 12px;
    justify-content: space-between;
}
a{color: black;}
</style>